<template>
	<view class="container">
		<view class="set-popup">
			<tui-navigation-bar @init="initNavigation" :transparent="true" backgroundColor="#313431" color="#222222"
				title="服务地址" :fontWeight="600">
				<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
					<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
				</view>
			</tui-navigation-bar>
			<view class="set-content">
				<view class="address">
					<view class="coverage">
						<view class="title">选择区域</view>
						<view class="city-list">
							<scroll-view scroll-y="true" class="scroll-Y">
								<view class="city-item" :class="{'active': district.index == index}"
									v-for="(item,index) in details.addressList" :key="item.addressId"
									@tap.stop.prevent="selectCity(item,index)">
									{{item.cityName}}·{{item.name}}
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="details-address">
						<view class="title">详细地址</view>
						<uv-textarea :height="160" v-model="details.addressList[district.index ].detail" :maxlength="-1"
							class="details-address-textarea" placeholder="请填写详细地址，街道、楼牌号等"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #999B9B;"></uv-textarea>
					</view>
				</view>
				<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmit">提交</button>
			</view>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '订单支付', //标题
				loading: false,
				userId: null,
				district: {
					index: 0,
					address: {},
				},
				details: null,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.userId = options.id
			this.details = uni.getStorageSync('checkData');
			this.district.index = this.details.district ? this.details.district.index : 0
		},
		onShow: function() {},
		onHide() {
			uni.removeStorageSync('checkData');
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			onAgreement(detail, name) {
				this.agreement = !detail
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			selectCity(item, index) {
				if (this.district.index != index) {
					this.district.index = index
					this.$set(this.district, 'address', item)
				}
			},
			onSubmit() {
				if (!this.details.addressList[this.district.index].detail) {
					this.$refs.toast.show({
						type: 'default',
						message: "请填写详细地址"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 2000)
				}
				let address = this.details.addressList[this.district.index].cityName + this.details.addressList[this
					.district.index].name + this.details.addressList[this.district.index].detail
				
				this.$set(this.district, 'address', this.details.addressList[this.district.index])
				this.$set(this.district, 'detail', address)
				this.$set(this.details, 'district', this.district)
				uni.setStorageSync('details', this.details);
				app.navigationTo('page_sharing/check/check?id=' + this.userId)
			},
			// 返回上一页
			goBack: function() {
				uni.removeStorageSync('checkData');
				app.beNavigateBack();
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.set-popup {
			width: 100vw;
			min-height: 100vh;
			background: #F6F8F7;
			background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png");
			background-repeat: no-repeat;
			background-size: 100% 640rpx;
			box-sizing: border-box;
			padding: 192rpx 24rpx 0;
			position: relative;

			.set-content {
				.address {
					padding: 36rpx 24rpx 62rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 20rpx;

					.coverage {
						display: flex;

						.title {
							font-size: 28rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 37rpx;
							margin-right: 32rpx;
							flex-shrink: 0;
							box-sizing: border-box;
							padding-top: 16rpx;
						}

						.city-list {
							width: 100%;
							flex: 1;

							.scroll-Y {
								height: 400rpx;
							}

							.city-item {
								display: inline-block;
								box-sizing: border-box;
								padding: 17rpx 0;
								background: #FFFFFF;
								border-radius: 20rpx;
								border: 2rpx solid #E3E9E5;
								margin-bottom: 24rpx;
								width: calc((100% - 32rpx)/2);
								white-space: nowrap;
								text-align: center;
								margin-right: 10rpx;
								font-size: 28rpx;
								font-weight: 900;
								color: #282D2D;
								line-height: 37rpx;

								&.active {
									border: 4rpx solid #282D2D;
									position: relative;

									&::before {
										content: "";
										display: block;
										width: 36rpx;
										height: 28rpx;
										background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/city-active.png');
										background-size: 100%;
										position: absolute;
										right: 0;
										bottom: 0;
									}
								}
							}
						}
					}

					.details-address {
						margin-top: 36rpx;

						.title {
							font-size: 28rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 37rpx;
							margin-bottom: 16rpx;
						}

						.details-address-textarea {
							box-sizing: border-box;
							padding: 28rpx 24rpx;
						}
					}
				}

				.btn-submit {
					position: absolute;
					bottom: 64rpx;
					left: 50%;
					transform: translateX(-50%);
					width: calc(100% - 77rpx + 24rpx);

				}
			}
		}
	}
</style>